<ui:composition         
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:ds="http://deltaset.org/deltaset-faces"
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:p="http://primefaces.org/ui">

    <h:form id="form"> 

        <p:dataTable var="car" value="#{tableBean.carsSmall}">  
            <p:column>  
                <f:facet name="header">  
                    Model  
                </f:facet>  
                <h:outputText value="#{car.model}" />  
            </p:column>  

            <p:column>  
                <f:facet name="header">  
                    Year  
                </f:facet>  
                <h:outputText value="#{car.year}" />  
            </p:column>  

            <p:column>  
                <f:facet name="header">  
                    Manufacturer  
                </f:facet>  
                <h:outputText value="#{car.manufacturer}" />  
            </p:column>  

            <p:column>  
                <f:facet name="header">  
                    Color  
                </f:facet>  
                <h:outputText value="#{car.color}" />  
            </p:column>  
        </p:dataTable> 

        <hr/>
        <hr/>

        <p:dataTable id="tbl" var="car" value="#{tableBean.lazyModel}" paginator="true" rows="10"
                     paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                     rowsPerPageTemplate="5,10,15" selectionMode="single" selection="#{tableBean.selectedCar}">



            <p:column headerText="Model" sortBy="#{car.model}" filterBy="#{car.model}">
                <h:outputText value="#{car.model}" />
            </p:column>

            <p:column headerText="Year" sortBy="#{car.year}" filterBy="#{car.year}">
                <h:outputText value="#{car.year}" />
            </p:column>

            <p:column headerText="Manufacturer" sortBy="#{car.manufacturer}" filterBy="#{car.manufacturer}">
                <h:outputText value="#{car.manufacturer}" />
            </p:column>

            <p:column headerText="Color" sortBy="#{car.color}" filterBy="#{car.color}">
                <h:outputText value="#{car.color}" />
            </p:column>
        </p:dataTable>

        <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"
                  showEffect="explode" hideEffect="explode">

            <h:panelGrid id="display" columns="2" cellpadding="4">

                <f:facet name="header">
                    <p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
                </f:facet>

                <h:outputText value="Model:" />
                <h:outputText value="#{tableBean.selectedCar.model}" style="font-weight:bold"/>

                <h:outputText value="Year:" />
                <h:outputText value="#{tableBean.selectedCar.year}" style="font-weight:bold"/>

                <h:outputText value="Manufacturer:" />
                <h:outputText value="#{tableBean.selectedCar.manufacturer}" style="font-weight:bold"/>

                <h:outputText value="Color:" />
                <h:outputText value="#{tableBean.selectedCar.color}" style="font-weight:bold"/>
            </h:panelGrid>
        </p:dialog> 



        <h:panelGrid columns="2">  
            <p:panel header="Export All Data">  
                <h:commandLink>  
                    <p:graphicImage value="/images/excel.png" />  
                    <p:dataExporter type="xls" target="tbl" fileName="cars" />  
                </h:commandLink>  

                <h:commandLink>  
                    <p:graphicImage value="/images/pdf.png" />  
                    <p:dataExporter type="pdf" target="tbl" fileName="cars"/>  
                </h:commandLink>  

                <h:commandLink>  
                    <p:graphicImage value="/images/csv.png" />  
                    <p:dataExporter type="csv" target="tbl" fileName="cars" />  
                </h:commandLink>  

                <h:commandLink>  
                    <p:graphicImage value="/images/xml.png" />  
                    <p:dataExporter type="xml" target="tbl" fileName="cars" />  
                </h:commandLink>  
            </p:panel>  

            <p:panel header="Export Page Data">  
                <h:commandLink>  
                    <p:graphicImage value="/images/excel.png" />  
                    <p:dataExporter type="xls" target="tbl" fileName="cars" pageOnly="true"/>  
                </h:commandLink>  

                <h:commandLink>  
                    <p:graphicImage value="/images/pdf.png" />  
                    <p:dataExporter type="pdf" target="tbl" fileName="cars" pageOnly="true"/>  
                </h:commandLink>  

                <h:commandLink>  
                    <p:graphicImage value="/images/csv.png" />  
                    <p:dataExporter type="csv" target="tbl" fileName="cars" pageOnly="true"/>  
                </h:commandLink>  

                <h:commandLink>  
                    <p:graphicImage value="/images/xml.png" />  
                    <p:dataExporter type="xml" target="tbl" fileName="cars" pageOnly="true"/>  
                </h:commandLink>  
            </p:panel>  
        </h:panelGrid> 

    </h:form>

</ui:composition>   
